<template>
	<scroll-view scroll-y class="video-list" enable-flex @scrolltolower="handlescroll">
		<view class="content" v-if="videoList.length>0">
			<view class="video-item" @click="To_play(item)" v-for="item in videoList" :key="item.id">
				<image :src="item.img" mode="aspectFill"></image>
			</view>
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
	</scroll-view>
</template>

<script>
	import {videoList} from '@/api/video'
	export default{
		data(){
			return{
				parms:{
					limit:30,
					skip:0,
					order:"hot"
				},
				videoList:[],
				hasmore:true,
				status: 'loading',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		mounted() {
			this.loadData()
		},
		methods:{
			loadData(){
				const{ limit,skip,order }=this.parms
				videoList({limit,skip,order}).then(res=>{
					console.log(res)
					if(res.res.videowp.length>0){
						this.status='loading'
					}else{
						this.status='nomore'
						this.hasmore=false
					}
					this.videoList=[...this.videoList,...res.res.videowp]
				})
			},
			// 触底加载
			handlescroll(){
				if(this.hasmore){
					this.parms.skip+=this.parms.limit
					this.loadData()
				}
			},
			// 去视频播放
			To_play(item){
				console.log(item)
				uni.navigateTo({
					url:"/pages/video/detail?item="+encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style lang="scss">
	.video-list{
		height: calc(100vh - 70rpx);
	}
	.content{
		display: flex;
		flex-wrap: wrap;
		padding: 0 10rpx;
		.video-item{
			width: 33.33%;
			height: 240rpx;
			border: 5rpx solid #fff;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	u-loadmore{
		width: 100%;
		padding: 20rpx 0;
	}
</style>
